React createPortal: Мастерство создания порталов и обработки событий

В современной веб-разработке на React крайне важно создавать пользовательские интерфейсы, которые без проблем интегрируются с базовой структурой документа. Хотя компонентная модель React отлично справляется с управлением виртуальным DOM, иногда нам нужно рендерить элементы за пределами обычной иерархии компонентов. Именно здесь на помощь приходит createPortal. Это руководство подробно рассматривает createPortal, охватывая его назначение, использование и продвинутые техники для обработки событий и создания сложных элементов UI. Мы рассмотрим вопросы интернационализации, лучшие практики доступности и распространенные ошибки, которых следует избегать.

Что такое React createPortal?

createPortal — это API React, которое позволяет рендерить дочерние элементы компонента React в другую часть DOM-дерева, за пределами иерархии родительского компонента. Это особенно полезно для создания таких элементов, как модальные окна, всплывающие подсказки, выпадающие списки и оверлеи, которые должны располагаться на верхнем уровне документа или в определенном контейнере, независимо от того, где в дереве компонентов React находится компонент, который их вызывает.

Без createPortal достижение этого часто требует сложных обходных путей, таких как прямое манипулирование DOM или использование абсолютного позиционирования в CSS, что может привести к проблемам с контекстами наложения, конфликтам z-index и доступностью.

Зачем использовать createPortal?

Вот ключевые причины, по которым createPortal является ценным инструментом в вашем арсенале React:

• Улучшенная структура DOM: Позволяет избежать глубокого вложения компонентов в DOM, что приводит к более чистой и управляемой структуре. Это особенно важно для сложных приложений с множеством интерактивных элементов.
• Упрощенное стилизование: Легко позиционировать элементы относительно viewport или определенных контейнеров, не прибегая к сложным трюкам CSS. Это упрощает стилизацию и верстку, особенно при работе с элементами, которые должны накладываться на другой контент.
• Повышенная доступность: Облегчает создание доступных UI, позволяя управлять фокусом и навигацией с клавиатуры независимо от иерархии компонентов. Например, обеспечивая удержание фокуса внутри модального окна.
• Лучшая обработка событий: Позволяет событиям корректно распространяться от содержимого портала к дереву React, гарантируя, что обработчики событий, прикрепленные к родительским компонентам, будут работать как ожидается.

Основное использование createPortal

API createPortal принимает два аргумента:

1. Узел React (JSX), который вы хотите отрендерить.
2. DOM-элемент, в котором вы хотите отрендерить узел. Этот DOM-элемент в идеале должен существовать до того, как компонент, использующий createPortal, будет смонтирован.

Вот простой пример:

Пример: Рендеринг модального окна

Допустим, у вас есть компонент модального окна, который вы хотите отрендерить в конце элемента body.

            import React from 'react';
import ReactDOM from 'react-dom';

function Modal({ children, isOpen, onClose }) {
  if (!isOpen) return null;

  const modalRoot = document.getElementById('modal-root'); // Assumes you have a 
 in your HTML

  if (!modalRoot) {
    console.error('Modal root element not found!');
    return null;
  }

  return ReactDOM.createPortal(
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal-content" onClick={(e) => e.stopPropagation()}>
        {children}
      </div>
    </div>,
    modalRoot
  );
}

export default Modal;

            

              
                Copy
              
            
          

Объяснение:

• Мы импортируем ReactDOM, потому что createPortal является методом объекта ReactDOM.
• Мы предполагаем, что в вашем HTML есть DOM-элемент с ID modal-root. Именно здесь будет отрендерено модальное окно. Убедитесь, что этот элемент существует. Распространенной практикой является добавление <div id="modal-root"></div> прямо перед закрывающим тегом </body> в вашем файле index.html.
• Мы используем ReactDOM.createPortal для рендеринга JSX модального окна в элемент modalRoot.
• Мы используем e.stopPropagation(), чтобы событие onClick на содержимом модального окна не вызвало обработчик onClose на оверлее. Это гарантирует, что клик внутри модального окна не закроет его.

Использование:

            import React, { useState } from 'react';
import Modal from './Modal';

function App() {
  const [isModalOpen, setIsModalOpen] = useState(false);

  return (
    <div>
      <button onClick={() => setIsModalOpen(true)}>Open Modal</button>
      <Modal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)}>
        <h2>Modal Content</h2>
        <p>This is the content of the modal.</p>
        <button onClick={() => setIsModalOpen(false)}>Close</button>
      </Modal>
    </div>
  );
}

export default App;

            

              
                Copy
              
            
          

Этот пример демонстрирует, как рендерить модальное окно за пределами обычной иерархии компонентов, что позволяет позиционировать его абсолютно на странице. Использование createPortal таким образом решает распространенные проблемы с контекстами наложения и позволяет легко создавать единообразный стиль модальных окон во всем приложении.

Обработка событий с createPortal

Одним из ключевых преимуществ createPortal является то, что он сохраняет нормальное поведение всплытия событий в React. Это означает, что события, исходящие из содержимого портала, все равно будут распространяться вверх по дереву компонентов React, позволяя родительским компонентам их обрабатывать.

Однако важно понимать, как обрабатываются события, когда они пересекают границу портала.

Пример: Обработка событий вне портала

            import React, { useState, useRef, useEffect } from 'react';
import ReactDOM from 'react-dom';

function OutsideClickExample() {
  const [isOpen, setIsOpen] = useState(false);
  const dropdownRef = useRef(null);
  const portalRoot = document.getElementById('portal-root');

  useEffect(() => {
    function handleClickOutside(event) {
      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
        setIsOpen(false);
      }
    }

    document.addEventListener('mousedown', handleClickOutside);

    return () => {
      document.removeEventListener('mousedown', handleClickOutside);
    };
  }, [dropdownRef]);

  return (
    <div>
      <button onClick={() => setIsOpen(!isOpen)}>Toggle Dropdown</button>
      {isOpen && portalRoot && ReactDOM.createPortal(
        <div ref={dropdownRef} style={{ position: 'absolute', top: '50px', left: '0', border: '1px solid black', padding: '10px', backgroundColor: 'white' }}>
          Dropdown Content
        </div>,
        portalRoot
      )}
    </div>
  );
}

export default OutsideClickExample;

            

              
                Copy
              
            
          

Объяснение:

• Мы используем ref для доступа к элементу выпадающего списка, отрендеренному внутри портала.
• Мы прикрепляем обработчик события mousedown к document для обнаружения кликов вне выпадающего списка.
• Внутри обработчика события мы проверяем, произошел ли клик вне выпадающего списка, используя dropdownRef.current.contains(event.target).
• Если клик произошел вне выпадающего списка, мы закрываем его, устанавливая isOpen в false.

Этот пример демонстрирует, как обрабатывать события, происходящие вне содержимого портала, что позволяет создавать интерактивные элементы, которые реагируют на действия пользователя в окружающем документе.

Продвинутые сценарии использования

createPortal не ограничивается простыми модальными окнами и всплывающими подсказками. Его можно использовать в различных продвинутых сценариях, включая:

• Контекстные меню: Динамический рендеринг контекстных меню рядом с курсором мыши по правому клику.
• Уведомления: Отображение уведомлений в верхней части экрана, независимо от иерархии компонентов.
• Пользовательские поповеры: Создание пользовательских компонентов поповеров с продвинутым позиционированием и стилизацией.
• Интеграция со сторонними библиотеками: Использование createPortal для интеграции компонентов React со сторонними библиотеками, которые требуют определенной структуры DOM.

Пример: Создание контекстного меню

            import React, { useState, useRef, useEffect } from 'react';
import ReactDOM from 'react-dom';

function ContextMenuExample() {
  const [contextMenu, setContextMenu] = useState(null);
  const menuRef = useRef(null);

  useEffect(() => {
    function handleClickOutside(event) {
      if (menuRef.current && !menuRef.current.contains(event.target)) {
        setContextMenu(null);
      }
    }
    document.addEventListener('mousedown', handleClickOutside);
    return () => {
      document.removeEventListener('mousedown', handleClickOutside);
    };
  }, [menuRef]);

  const handleContextMenu = (event) => {
    event.preventDefault();
    setContextMenu({
      x: event.clientX,
      y: event.clientY,
    });
  };

  const portalRoot = document.getElementById('portal-root');

  return (
    <div onContextMenu={handleContextMenu} style={{ border: '1px solid black', padding: '20px' }}>
      Right-click here to open context menu
      {contextMenu && portalRoot && ReactDOM.createPortal(
        <div
          ref={menuRef}
          style={{
            position: 'absolute',
            top: contextMenu.y,
            left: contextMenu.x,
            border: '1px solid black',
            padding: '10px',
            backgroundColor: 'white',
          }}
        >
          <ul>
            <li>Option 1</li>
            <li>Option 2</li>
            <li>Option 3</li>
          </ul>
        </div>,
        portalRoot
      )}
    </div>
  );
}

export default ContextMenuExample;

            

              
                Copy
              
            
          

Объяснение:

• Мы используем событие onContextMenu для обнаружения правых кликов на целевом элементе.
• Мы предотвращаем появление стандартного контекстного меню с помощью event.preventDefault().
• Мы сохраняем координаты мыши в переменной состояния contextMenu.
• Мы рендерим контекстное меню внутри портала, позиционируя его по координатам мыши.
• Мы включаем ту же логику обнаружения кликов снаружи, что и в предыдущем примере, чтобы закрыть контекстное меню, когда пользователь кликает вне его.

Вопросы доступности

При использовании createPortal крайне важно учитывать доступность, чтобы ваше приложение было пригодно для использования всеми.

Управление фокусом

Когда портал открывается (например, модальное окно), вы должны убедиться, что фокус автоматически перемещается на первый интерактивный элемент внутри портала. Это помогает пользователям, которые перемещаются с помощью клавиатуры или скринридера, легко получить доступ к содержимому портала.

Когда портал закрывается, вы должны вернуть фокус на элемент, который вызвал открытие портала. Это поддерживает последовательный поток навигации.

Атрибуты ARIA

Используйте атрибуты ARIA для предоставления семантической информации о содержимом портала. Например, используйте aria-modal="true" на элементе модального окна, чтобы указать, что это модальный диалог. Используйте aria-labelledby, чтобы связать модальное окно с его заголовком, и aria-describedby, чтобы связать его с его описанием.

Навигация с клавиатуры

Убедитесь, что пользователи могут перемещаться по содержимому портала с помощью клавиатуры. Используйте атрибут tabindex для управления порядком фокуса и убедитесь, что все интерактивные элементы доступны с клавиатуры.

Рассмотрите возможность "запирания" фокуса внутри портала, чтобы пользователи не могли случайно переместиться за его пределы. Этого можно достичь, прослушивая нажатие клавиши Tab и программно перемещая фокус на первый или последний интерактивный элемент внутри портала.

Пример: Доступное модальное окно

            import React, { useState, useRef, useEffect } from 'react';
import ReactDOM from 'react-dom';

function AccessibleModal({ children, isOpen, onClose, labelledBy, describedBy }) {
  const modalRef = useRef(null);
  const firstFocusableElementRef = useRef(null);
  const [previouslyFocusedElement, setPreviouslyFocusedElement] = useState(null);
  const modalRoot = document.getElementById('modal-root');

  useEffect(() => {
    if (isOpen) {
      // Save the currently focused element before opening the modal.
      setPreviouslyFocusedElement(document.activeElement);

      // Focus the first focusable element in the modal.
      if (firstFocusableElementRef.current) {
        firstFocusableElementRef.current.focus();
      }

      // Trap focus within the modal.
      function handleKeyDown(event) {
        if (event.key === 'Tab') {
          const focusableElements = modalRef.current.querySelectorAll(
            'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
          );
          const firstFocusableElement = focusableElements[0];
          const lastFocusableElement = focusableElements[focusableElements.length - 1];

          if (event.shiftKey) {
            // Shift + Tab
            if (document.activeElement === firstFocusableElement) {
              lastFocusableElement.focus();
              event.preventDefault();
            }
          } else {
            // Tab
            if (document.activeElement === lastFocusableElement) {
              firstFocusableElement.focus();
              event.preventDefault();
            }
          }
        }
      }

      document.addEventListener('keydown', handleKeyDown);

      return () => {
        document.removeEventListener('keydown', handleKeyDown);
        // Restore focus to the element that had focus before opening the modal.
        if(previouslyFocusedElement && previouslyFocusedElement.focus) {
          previouslyFocusedElement.focus();
        }
      };
    }
  }, [isOpen, previouslyFocusedElement]);

  if (!isOpen) return null;

  return ReactDOM.createPortal(
    <div
      className="modal-overlay"
      onClick={onClose}
      aria-modal="true"
      aria-labelledby={labelledBy}
      aria-describedby={describedBy}
      ref={modalRef}
    >
      <div className="modal-content" onClick={(e) => e.stopPropagation()}>
        <h2 id={labelledBy}>Modal Title</h2>
        <p id={describedBy}>This is the modal content.</p>
        <button ref={firstFocusableElementRef} onClick={onClose}>
          Close
        </button>
        {children}
      </div>
    </div>,
    modalRoot
  );
}

export default AccessibleModal;

            

              
                Copy
              
            
          

Объяснение:

• Мы используем атрибуты ARIA, такие как aria-modal, aria-labelledby и aria-describedby, для предоставления семантической информации о модальном окне.
• Мы используем хук useEffect для управления фокусом при открытии и закрытии модального окна.
• Мы сохраняем текущий сфокусированный элемент перед открытием модального окна и восстанавливаем фокус на нем при закрытии.
• Мы "запираем" фокус внутри модального окна с помощью обработчика события keydown.

Вопросы интернационализации (i18n)

При разработке приложений для глобальной аудитории интернационализация (i18n) является критически важным аспектом. При использовании createPortal следует учитывать несколько моментов:

• Направление текста (RTL/LTR): Убедитесь, что ваши стили поддерживают как языки с написанием слева направо (LTR), так и справа налево (RTL). Это может включать использование логических свойств в CSS (например, margin-inline-start вместо margin-left) и соответствующую установку атрибута dir на элементе HTML.
• Локализация контента: Весь текст внутри портала должен быть локализован на предпочтительный язык пользователя. Используйте библиотеку i18n (например, react-intl, i18next) для управления переводами.
• Форматирование чисел и дат: Форматируйте числа и даты в соответствии с локалью пользователя. API Intl предоставляет для этого функциональность.
• Культурные особенности: Будьте в курсе культурных особенностей, связанных с элементами UI. Например, расположение кнопок может отличаться в разных культурах.

Пример: i18n с react-intl

            import React from 'react';
import { FormattedMessage } from 'react-intl';

function MyComponent() {
  return (
    <div>
      <FormattedMessage id="myComponent.greeting" defaultMessage="Hello, world!" />
    </div>
  );
}

export default MyComponent;

            

              
                Copy
              
            
          

Компонент FormattedMessage из react-intl извлекает переведенное сообщение на основе локали пользователя. Настройте react-intl с вашими переводами для разных языков.

Распространенные ошибки и их решения

Хотя createPortal — это мощный инструмент, важно знать о некоторых распространенных ошибках и способах их избежать:

• Отсутствие корневого элемента портала: Убедитесь, что DOM-элемент, который вы используете в качестве корневого для портала, существует до того, как компонент, использующий createPortal, будет смонтирован. Хорошей практикой является размещение его непосредственно в index.html.
• Конфликты Z-Index: Будьте внимательны к значениям z-index при позиционировании элементов с помощью createPortal. Используйте CSS для управления контекстами наложения и убедитесь, что содержимое вашего портала отображается правильно.
• Проблемы с обработкой событий: Понимайте, как события распространяются через портал, и обрабатывайте их соответствующим образом. Используйте e.stopPropagation(), чтобы предотвратить вызов нежелательных действий событиями.
• Утечки памяти: Правильно очищайте обработчики событий и ссылки, когда компонент, использующий createPortal, размонтируется, чтобы избежать утечек памяти. Используйте хук useEffect с функцией очистки для этого.
• Неожиданные проблемы с прокруткой: Порталы иногда могут мешать ожидаемому поведению прокрутки страницы. Убедитесь, что ваши стили не предотвращают прокрутку и что модальные элементы не вызывают скачков страницы или неожиданного поведения прокрутки при их открытии и закрытии.

Заключение

React.createPortal — это ценный инструмент для создания гибких, доступных и поддерживаемых UI в React. Понимая его назначение, использование и продвинутые техники для обработки событий и обеспечения доступности, вы можете использовать его мощь для создания сложных и увлекательных веб-приложений, которые предоставляют превосходный пользовательский опыт для глобальной аудитории. Не забывайте учитывать лучшие практики интернационализации и доступности, чтобы ваши приложения были инклюзивными и пригодными для использования всеми.

Следуя рекомендациям и примерам из этого руководства, вы можете уверенно использовать createPortal для решения распространенных проблем UI и создания потрясающих веб-впечатлений.